<template>
  <div class="audit-list-view">
    <modules-title class="title-position" title-name="我的审批">

      <template slot="btn"/>

    </modules-title>

    <div class="content">

      <!--      <el-tabs v-model="activeName" @tab-click="handleClick">-->
      <!--        <el-tab-pane label="我发起的" name="1" />-->
      <!--        <el-tab-pane label="我处理的" name="2" />-->
      <!--      </el-tabs>-->

      <!--      <div class="screen-view">-->
      <!--        <el-form-->
      <!--          ref="queryForm"-->
      <!--          :model="screenData"-->
      <!--          :inline="true"-->
      <!--          label-width="68px"-->
      <!--        >-->

      <!--          <el-form-item label="业务类型">-->
      <!--            <el-select-->
      <!--              v-model="screenData.checkValue"-->
      <!--              placeholder="请选择类型"-->
      <!--              size="small"-->
      <!--              @change="typeChange"-->
      <!--            >-->
      <!--              <el-option-->
      <!--                v-for="item in typeOptions"-->
      <!--                :key="item.Key"-->
      <!--                :label="item.Value"-->
      <!--                :value="item.Key"-->
      <!--              />-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->

      <!--          <el-form-item label="状态">-->
      <!--            <el-select-->
      <!--              v-model="screenData.state"-->
      <!--              placeholder="请选择类型"-->
      <!--              size="small"-->
      <!--              @change="stateChange"-->
      <!--            >-->
      <!--              <el-option label="全部" value="All" />-->
      <!--              <el-option label="已审批" value="Finished" />-->
      <!--              <el-option label="未审批" value="Unfinished" />-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->

      <!--          <el-form-item label="发起时间">-->
      <!--            <el-date-picker-->
      <!--              v-model="value"-->
      <!--              type="daterange"-->
      <!--              range-separator="至"-->
      <!--              start-placeholder="开始日期"-->
      <!--              end-placeholder="结束日期"-->
      <!--              @change="dateChange"-->
      <!--            />-->
      <!--          </el-form-item>-->

      <!--          <el-form-item label="关键字">-->
      <!--            <el-input v-model="screenData.key" placeholder="请输入" />-->
      <!--          </el-form-item>-->

      <!--          <el-form-item>-->

      <!--            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>-->
      <!--            <el-button plain icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </div>-->

      <!--      <div class="tab-view">-->
      <!--        <el-table v-loading="loading" border size="medium" :data="tableData" @row-click="tableRowClick">-->
      <!--          <el-table-column label="流程编号" align="center" prop="SerialNumber" width="120" />-->
      <!--          <el-table-column label="业务类型" align="center" width="140">-->
      <!--            <template slot-scope="scope">-->
      <!--              <span v-if="scope.row.Flow.Code == 'QualitySource'">质量标准审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'StabilityScheme'">稳定性方案审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ExchangeStability'">更换稳定性箱审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'BuildProject'">立项审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'Resolutions'">立项决议审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'CheckResult'">检验结果审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'RepealCheck'">撤销检验审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ApprovalCheck'">请验审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'RetainDestroy'">留样销毁审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProblemAcceptance'">问题验收</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ChangeProjectInfo'">项目信息变更</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ChangeProjectMember'">项目成员变更</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ChangeProjectTask'">项目任务变更</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProjectPause'">项目暂停</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProjectStop'">项目停止</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProjectFirstCheck'">项目方案书</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProjectPlanCheck'">项目计划审批</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ProjectEndCheck'">项目结题验收</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'TaskCheck'">任务验收</span>-->
      <!--              <span v-else-if="scope.row.Flow.Code == 'ChangeProjectMulTask'">任务批量变更</span>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          &lt;!&ndash;        <el-table-column label="申请人" align="center" width="140">&ndash;&gt;-->
      <!--          &lt;!&ndash;          <template slot-scope="scope">&ndash;&gt;-->
      <!--          &lt;!&ndash;            <span v-if="scope.row.Creator">{{scope.row.Creator.name}}</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;          </template>&ndash;&gt;-->
      <!--          &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
      <!--          <el-table-column label="信息摘要" align="left" header-align="center">-->
      <!--            <template slot-scope="scope">-->
      <!--              <span v-if="scope.row.Template">{{ scope.row.Template.Abstract }}</span>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="发起人" align="center" width="200" v-if="activeName == 2">-->
      <!--            <template slot-scope="scope">-->
      <!--              <span v-if="scope.row.Creator">{{ scope.row.Creator.Name }}</span>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="发起时间" align="center" prop="CreatedAt" width="200">-->
      <!--            <template slot-scope="scope">-->
      <!--              <span>{{ scope.row.CreatedAt ? dateFormat1("yyyy-mm-dd HH:MM:SS",scope.row.CreatedAt) : "" }}</span>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="进入本步骤时间" align="center" width="200" v-if="activeName == 2">-->
      <!--            <template slot-scope="scope">-->
      <!--              <div>{{getNextTime(scope.row)}}</div>-->
      <!--              <div style="color: red">{{residenceTime(scope.row)}}</div>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="最后处理时间" align="center" width="200" v-else-if="activeName == 1">-->
      <!--            <template slot-scope="scope">-->
      <!--              <div>{{ scope.row.StateTime ? dateFormat1("yyyy-mm-dd HH:MM:SS",scope.row.StateTime) : "" }}</div>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="状态" align="center" width="125">-->
      <!--            <template slot-scope="scope">-->
      <!--              <span v-if="scope.row.State == 'ToDo'">待审核</span>-->
      <!--              <span v-else-if="scope.row.State == 'Doing'">审核中</span>-->
      <!--              <span v-else-if="scope.row.State == 'Reject'">驳回上一步</span>-->
      <!--              <span v-else-if="scope.row.State == 'Refuse'">已拒绝</span>-->
      <!--              <span v-else-if="scope.row.State == 'Done'">审核完成</span>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column v-if="activeName == 2" label="操作" align="left" header-align="center" class-name="small-padding fixed-width" width="150">-->
      <!--            <template slot-scope="scope">-->

      <!--              <el-button-->
      <!--                style="padding: 0"-->
      <!--                v-if="scope.row.State != 'Done' && scope.row.State != 'Refuse'"-->
      <!--                size="medium"-->
      <!--                type="text"-->
      <!--                icon="el-icon-order"-->
      <!--                @click="auditClick(scope.row)"-->
      <!--              >-->
      <!--                {{getBtnStr(scope.row)}}-->
      <!--              </el-button>-->

      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--        </el-table>-->
      <!--      </div>-->

      <!--      <pagination-->
      <!--        style="display:flex;justify-content:flex-end;"-->
      <!--        :total="total"-->
      <!--        :page.sync="screenData.pager.skip"-->
      <!--        :limit.sync="screenData.pager.limit"-->
      <!--        @pagination="getListData"-->
      <!--      />-->


      <list ref="list" :type-list="typeOptions" @toDetail="auditClick" @toEdit="toEdit"></list>
    </div>

  </div>
</template>

<script>
  import { lookInfoSet } from '../../api/printSetting'
  import list from '../../components/approval/list'
  import { dateFormat1 } from '../../utils/ruoyi'

  export default {
    name: 'Index',
    components: { list },
    data: function() {
      return {
        user_id: '',
        loading: false,
        activeName: '1',
        value: [],
        tableData: [],
        screenData: {
          checkValue: '',
          check_type: [],
          status: 1,
          start_time: null,
          end_time: null,
          key: '',
          i_create: 1,
          state: 'All',
          pager: {
            limit: 10,
            skip: 1
          }
        },
        typeOptions: [],
        total: 0

      }
    },
    beforeRouteEnter(to, from, next) {
      to.params.refresh = from.params.refresh

      next()
    },
    activated: function() {
      if (this.$route.params.refresh) {
        //this.getListData()
        if (this.$refs.list) {
          this.$refs.list.getList()
        }
      }
    },
    mounted() {
      this.user_id = this.$store.getters.userInfo.user.id
      //this.getListData()

      lookInfoSet({ dictType: 'flow_type' }).then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            let a = {
              Key: item.dict_key,
              Value: item.dict_val
            }
            this.typeOptions.push(a)
          })
        }
      })
    },
    methods: {
      getNextTime: function(row) {
        let str = ''
        if (row.Next && row.Next.length) {
          let index = row.Next.findIndex(a => {
            return a.Staffs.findIndex(b => b == this.$store.getters.userInfo.user.id) != -1
          })
          if (index != -1) {
            let data = row.Next[index]
            str = data.StartTime ? dateFormat1('yyyy-mm-dd HH:MM:SS', data.StartTime) : ''
          } else {
            let data = row.Next[row.Next.length - 1]
            str = data.StartTime ? dateFormat1('yyyy-mm-dd HH:MM:SS', data.StartTime) : ''
          }
        } else if (row.Steps && row.Steps.length) {
          let index = row.Steps.findIndex(a => {
            return a.Step.Staff && a.Step.Staff.findIndex(b => b.StaffId == this.$store.getters.userInfo.user.id) != -1
          })
          if (index != -1) {
            let data = row.Steps[index]
            str = data.CreatedAt ? dateFormat1('yyyy-mm-dd HH:MM:SS', data.CreatedAt) : ''
          } else {
            let data = row.Steps[row.Steps.length - 1]
            str = data.CreatedAt ? dateFormat1('yyyy-mm-dd HH:MM:SS', data.CreatedAt) : ''
          }
        } else {
          str = row.StateTime ? dateFormat1('yyyy-mm-dd HH:MM:SS', row.StateTime) : ''
        }

        return str
      },
      residenceTime: function(row) {
        let str = ''
        if (row.State != 'Done' && row.State != 'Refuse') {
          if (row.Next && row.Next.length) {
            let index = row.Next.findIndex(a => {
              return a.Staffs.findIndex(b => b == this.$store.getters.userInfo.user.id) != -1
            })
            if (index != -1) {
              let data = row.Next[index]

              let date = new Date(data.StartTime.replace(/-/g, '/'))
              let date1 = new Date()
              let time = date1.getTime() - date.getTime()
              let day = 60 * 60 * 24 * 1000

              if (time > day) {
                str = '(滞留' + (time / day).toFixed(0) + '天)'
              }
            }
          }
        }

        return str
      },
      getBtnStr: function(row) {
        let str = ''
        if (row.State != 'Done' && row.State != 'Refuse') {
          if (row.Next && row.Next.length) {
            for (let i = 0; i < row.Next.length; i++) {
              let data = row.Next[i]
              let index = data.Staffs.findIndex(a => a == this.user_id)
              if (index != -1) {
                str = data.ItemName
                break
              }
            }
          }
        }
        return str
      },
      getListData: function() {
        this.screenData.i_create = Number(this.activeName)
        // this.$api.PROJECT_START_CHECK_LIST(this.screenData).then(res => {
        //     this.loading = false
        //     if (res.code == 200) {
        //         this.tableData = res.data.data
        //         this.total = res.data.total
        //     } else {
        //         this.$message.error(res.msg)
        //     }
        // }).catch(err => {
        //     this.loading = false
        // })
      },
      tableRowClick: function(row, column, event) {

        this.auditClick(row)

      },
      handleClick: function() {
        this.screenData.pager.skip = 1
        this.getListData()
      },
      typeChange: function() {
        if (!this.screenData.checkValue) {
          this.screenData.check_type = []
        } else {
          this.screenData.check_type = [this.screenData.checkValue]
        }
        this.screenData.pager.skip = 1
        this.getListData()
      },
      stateChange: function() {
        this.screenData.pager.skip = 1
        this.getListData()
      },
      dateChange: function() {
        if (this.value.length) {
          this.screenData.start_time = this.dealDateStr(this.value[0]) + ' 00:00:00'
          if (this.value.length > 1) {
            this.screenData.end_time = this.dealDateStr(this.value[1]) + ' 23:59:59'
          }
        } else {
          this.screenData.start_time = null
          this.screenData.end_time = null
        }
        this.getListData()
      },
      handleQuery: function() {
        this.screenData.pager.skip = 1
        this.getListData()
      },
      resetQuery: function() {
        this.screenData.check_type = []
        this.screenData.checkValue = ''
        this.screenData.state = 'All'
        this.screenData.status = 1
        this.screenData.pager.skip = 1
        this.screenData.start_time = null
        this.screenData.end_time = null
        this.screenData.key = ''
        this.value = []
        this.getListData()
      },
      toEdit(row) {
        this.auditClick(row)
      },
      auditClick: function(row) {
        let list = ['ChangeProjectInfo', 'ChangeProjectMember', 'ChangeProjectTask', 'ProjectPause', 'ProjectStop',
          'ProjectFirstCheck', 'ProjectPlanCheck', 'ProjectEndCheck', 'TaskCheck', 'ChangeProjectMulTask', 'ProjectEnd2Check']
        // if (column.label != '操作'){
        //     this.$router.push({name:'projectManagementReportDetail',query:{id:row.id}});
        // }
        if (list.findIndex(a => a == row.Flow.Code) != -1) {
          this.$router.push({ name: 'projectAuditDetail', query: { id: row.Id } })
        }
        if (row.Flow.Code == 'BuildProject') {
          this.$router.push({ name: 'proAuditDetails', query: { f_id: row.Id } })
        }
        if (row.Flow.Code == 'Resolutions') {
          this.$router.push({ name: 'selfAuditDetails', query: { f_id: row.Id } })
        }
        if (row.Flow.Code == 'CheckResult') {
          this.$router.push({ name: 'sampleInspectionMyTask', query: { f_id: row.Id, type: 'CheckResult' } })
        }
        if (row.Flow.Code == 'ReturnSample') {
          this.$router.push({ name: 'sampleInspectionMyTask', query: { f_id: row.Id, type: 'ReturnSample' } })
        }

        if (row.Flow.Code == 'RepealCheck') {
          this.$router.push({ name: 'sampleInspectionMyDetails', query: { f_id: row.Id, type: 'RepealCheck' } })
        }
        if (row.Flow.Code == 'ApprovalCheck') {
          this.$router.push({ name: 'sampleInspectionMyDetails', query: { f_id: row.Id, type: 'ApprovalCheck' } })
        }
        if (row.Flow.Code == 'RetainDestroy') {
          this.$router.push({ name: 'destructionApproval', query: { f_id: row.Id } })
        }
        if (row.Flow.Code == 'ExchangeStability') {
          this.$router.push({ name: 'changeDetailss', query: { f_id: row.Id } })
        }
        if (row.Flow.Code == 'StabilityScheme') {
          this.$router.push({ name: 'giveUpmyDetail', query: { f_id: row.Id } })
        }
        if (row.Flow.Code == 'QualitySource' || row.Flow.Code == 'QualitySourceChange') {
          this.$router.push({ name: 'myAuditDetail', query: { f_id: row.Id, state: row.State } })
        }
      },
      dealDateStr: function(date) {
        const year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }

        return year + '-' + month + '-' + day
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/audit/list";
</style>
